<template>
  <div class="app-container">
    <!-- 生产单档案 -->

    <div class="search-bar">
      <!-- 搜索 -->
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="生产单号" prop="batch">
          <el-input
            v-noSpace
            v-model="queryParams.batch"
            placeholder="请输入生产单号"
            clearable
            class="!w-[192px]"
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        <!-- <el-form-item label="产品名称" prop="productCode">
          <el-select
            v-model="queryParams.productCode"
            placeholder="请选择产品名称"
            class="!w-44"
            clearable
            filterable
            @visible-change="getProductType"
            @change="handleQuery"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="物料名称" prop="productCode">
          <el-select
            v-model="queryParams.productCode"
            placeholder="请选择物料名称"
            class="!w-[192px]"
            clearable
            filterable
            @visible-change="getProduct"
            @change="handleQuery"
          >
            <el-option
              v-for="item in productOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="移库状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择移库状态"
            class="!w-[192px]"
            clearable
            @change="handleQuery"
          >
            <el-option label="待移库" :value="0" />
            <el-option label="移库中" :value="1" />
            <el-option label="移库完成" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="移库单号" prop="code">
          <el-input
            v-noSpace
            v-model="queryParams.code"
            clearable
            class="!w-[192px]"
            @keyup.enter="handleQuery"
            placeholder="请输入移库单号"
          />
        </el-form-item>

        <el-form-item label="生产日期" prop="timeScopes">
          <el-date-picker
            v-model="queryParams.timeScopes"
            type="daterange"
            placeholder="选择日期"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            range-separator="至"
            value-format="YYYY-MM-DD"
            picker-options="pickerOptions"
            clearable
            @change="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery">查询</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
          <el-button
            icon="plus"
            v-hasPerm="'sys:inventory:edit'"
            type="warning"
            @click="handleAdd({}, 'add')"
          >
            新增
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 生产单列表 -->
    <el-card shadow="never">
      <el-table
        v-loading="loading"
        show-overflow-tooltip
        :tooltip-formatter="tableRowFormatter"
        :data="pageData"
        max-height="250px"
        @row-click="handleProdQuery"
      >
        <el-table-column prop="code" label="移库单号" min-width="100" />
        <el-table-column prop="batch" label="生产单号" min-width="100" />
        <el-table-column prop="productName" label="生产产品" />
        <el-table-column prop="moveDate" label="生产日期">
          <template #default="scope">
            {{ scope.row.moveDate || "-" }}
          </template>
        </el-table-column>

        <el-table-column prop="status" label="移库状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 0" type="warning">待移库</el-tag>
            <el-tag v-if="scope.row.status == 1" type="info">移库中</el-tag>
            <el-tag v-if="scope.row.status == 2" type="success">移库完成</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="finishTime" label="移库完成日期">
          <template #default="scope">
            {{ scope.row.finishTime }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="操作" min-width="100">
          <template #default="scope">
            <el-button
              v-hasPerm="'sys:inventory:edit'"
              v-if="scope.row.status == 0 || scope.row.status == 1"
              link
              type="primary"
              size="small"
              @click="handleAdd(scope.row, 'edit')"
            >
              修改
            </el-button>
            <el-button
              v-if="scope.row.status == 0 || scope.row.status == 1"
              link
              type="danger"
              size="small"
              @click="handleDel(scope.row)"
              v-hasPerm="'sys:inventory:del'"
            >
              删除
            </el-button>
            <el-button
              v-hasPerm="'sys:inventory:force'"
              v-if="scope.row.status == 0 || scope.row.status == 1"
              link
              type="warning"
              size="small"
              @click="handleDetail(scope.row)"
            >
              强制完成
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
    <el-card shadow="never" class="mt-4">
      <el-table :data="tableData" show-overflow-tooltip>
        <el-table-column prop="productCode" label="物料编号" />
        <el-table-column prop="productName" label="物料名称" />

        <el-table-column prop="warehouseNameFrom" label="来源储位" align="center" />
        <el-table-column prop="warehouseNameTo" label="目标储位" align="center" />

        <el-table-column prop="moveQty" label="已移库数量">
          <template #default="scope">
            {{ scope.row.moveQty || 0 }}
            {{ unitFormat(scope.row.unit) }}
          </template>
        </el-table-column>
        <el-table-column label="移库中数量">
          <template #default="scope">
            {{ scope.row.completeQty || 0 }}
            {{ unitFormat(scope.row.unit) }}
          </template>
        </el-table-column>
        <el-table-column prop="totalQty" label="总移库数量">
          <template #default="scope">
            {{ scope.row.totalQty || 0 }}
            {{ unitFormat(scope.row.unit) }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
      </el-table>
    </el-card>
    <pagination
      v-if="prodTotal > 0"
      v-model:total="prodTotal"
      v-model:page="queryProdTotalParams.pageNum"
      v-model:limit="queryProdTotalParams.pageSize"
      @pagination="handleProdQuery"
    />

    <!-- 新增/修改弹窗 -->
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      width="1000px"
      @close="handleCloseDialog"
    >
      <el-form
        ref="dialogFormDataRef"
        :model="dialogFormData"
        label-width="120px"
        :rules="rules"
        :disabled="formDisabled"
      >
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="移库单号" prop="code">
              <el-input v-noSpace v-model="dialogFormData.code" placeholder="请输入移库单号" disabled />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="移库类型" prop="category">
              <el-select
                v-model="dialogFormData.category"
                placeholder="请选择移库类型"
                clearable
                filterable
                @visible-change="getCategory"
              >
                <el-option
                  v-for="item in categoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col v-if="dialogFormData.category == '1'" :span="12">
            <el-form-item label="生产单号" prop="batch">
              <el-select
                v-model="dialogFormData.batch"
                placeholder="请选择生产单号"
                clearable
                filterable
                @visible-change="getbatch"
              >
                <el-option
                  v-for="item in batchOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="移库时间" prop="moveDate">
              <el-date-picker
                v-model="dialogFormData.moveDate"
                type="date"
                placeholder="选择时间"
                value-format="YYYY-MM-DD"
                style="width: 100%"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-noSpace
                v-model="dialogFormData.remark"
                :rows="2"
                type="textarea"
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-divider />

      <el-form
        ref="dialogFormDataProRef"
        :model="dialogFormDataPro"
        label-width="125px"
        :rules="rulesPro"
        :disabled="formDisabled"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="物料编号" prop="productCode">
              <el-input
                v-noSpace
                v-model="dialogFormDataPro.productCode"
                placeholder="请输入物料编号"
                disabled
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="物料名称" prop="productName">
              <el-select
                v-model="dialogFormDataPro.productName"
                placeholder="请选择物料名称"
                clearable
                filterable
                @change="changeproductName"
                @visible-change="getProduct"
              >
                <el-option
                  v-for="item in productOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="来源储位" prop="warehouseNameFrom">
              <el-select
                v-model="dialogFormDataPro.warehouseNameFrom"
                placeholder="请选择来源储位"
                clearable
                filterable
                @visible-change="getWarehouse"
                @change="changeWarehouse"
              >
                <el-option
                  v-for="item in warehouseOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="目标储位" prop="warehouseNameTo">
              <el-select
                v-model="dialogFormDataPro.warehouseNameTo"
                placeholder="请选择目标储位"
                clearable
                filterable
                @visible-change="getWarehouse"
                @change="changeWarehousetarget"
              >
                <el-option
                  v-for="item in warehouseOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="12">
            <el-form-item label="已移库数量（kg）" prop="moveQty">
              <el-input-number v-model="dialogFormDataPro.moveQty" placeholder="请输入" />
            </el-form-item>
          </el-col> -->

          <el-col :span="12">
            <el-form-item :label="`总移库数量（${unitValue?.label || ''}）`" prop="totalQty">
              <el-input-number v-model="dialogFormDataPro.totalQty" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-noSpace
                v-model="dialogFormDataPro.remark"
                :rows="2"
                type="textarea"
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" />
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="handleSavePro('continue')">添加原材料</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table v-loading="loading" :data="tableData">
        <el-table-column prop="productCode" label="物料编号" align="center" />
        <el-table-column prop="productName" label="物料名称" align="center" />
        <el-table-column prop="warehouseNameFrom" label="来源储位" align="center" />
        <el-table-column prop="warehouseNameTo" label="目标储位" align="center" />

        <!-- <el-table-column prop="moveQty" label="已移库数量(KG)" align="center">
          <template #default="scope">
            {{ scope.row.moveQty || 0 }}
          </template>
        </el-table-column>
        <el-table-column label="移库中数量(KG)" align="center">
          <template #default="scope">
            {{ scope.row.completeQty || 0 }}
          </template>
        </el-table-column> -->
        <el-table-column prop="totalQty" label="总移库数量(KG)" align="center">
          <template #default="scope">
            <div class="flex-center">
              <el-input
                v-noSpace
                class="flex-1"
                v-model="scope.row.totalQty"
                placeholder="请输入总移库数量"
              />
              <div>{{ unitFormat(scope.row.unit) }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip />
        <el-table-column label="操作" fixed="right" width="70" align="center">
          <template #default="scope">
            <el-button type="danger" size="small" link @click="delRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <div v-if="buttonIsishow" class="dialog-footer flex-center">
          <el-button @click="dialog.visible = false">取 消</el-button>
          <!-- <el-button type="primary" @click="handleSubmit('save')">暂 存</el-button> -->
          <el-button
            v-if="dialog.title == '新增' || dialog.title == '修改'"
            v-debounce="handleSubmit"
            type="primary"
          >
            提 交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import inventoryApi, {
  inventoryPageVO,
  inventoryPageQuery,
  inventoryForm,
  inventoryFormPro,
  TableDataType,
} from "@/api/warehouseManage/inventory";
import planOrderApi from "@/api/planManage/planOrderManage";

import { tableRowFormatter } from "@/utils/index";
import configApi, { ConfigType } from "@/api/config/config";
import { FormItemRule } from "element-plus/es";
const materialFormRef = ref(ElForm);

const dialogFormDataRef = ref(ElForm);

const dialogFormDataProRef = ref(ElForm);

const formDisabled = ref(false);

const tableData = ref<TableDataType[]>([]);

const buttonIsishow = ref(false);

const dialog = reactive({
  title: "",
  visible: false,
  type: "",
});

const optionsContact = ref<{ value: string; label: string }[]>([]); // 显式指定类型

const options = ref<{ value: string; label: string }[]>([]); // 显式指定类型

//原材料
const productOptions = ref<{ value: string; label: string; unit: string }[]>([]); // 显式指定类型

const batchOptions = ref<{ value: string; label: string }[]>([]); // 显式指定类型

const categoryOptions = ref<{ value: string; label: string }[]>([]); // 显式指定类型

const warehouseOptions = ref<{ value: string; label: string }[]>([]); // 显式指定类型

const queryFormRef = ref(ElForm);

const queryParams = reactive<inventoryPageQuery>({
  pageNum: 1,
  pageSize: 10,
});

const pageData = ref<inventoryPageVO[]>();

const total = ref(0);
const loading = ref(false);

// 新增/修改form
const dialogFormData = reactive<inventoryForm>({});

const dialogFormDataPro = reactive<inventoryFormPro>({});

const rules = reactive<Record<string, FormItemRule[]>>({
  category: [{ required: true, message: "移库类型是必填项", trigger: "blur" }],
});

const rulesPro = reactive<Record<string, FormItemRule[]>>({
  productName: [{ required: true, message: "物料名称是必填项", trigger: "blur" }],
  warehouseNameFrom: [{ required: true, message: "来源储位是必填项", trigger: "blur" }],
  warehouseNameTo: [{ required: true, message: "目标储位是必填项", trigger: "blur" }],
  totalQty: [
    { required: true, message: "总移库数量(KG)是必填项", trigger: ["blur", "change"] },
    { type: "number", message: "总移库数量(KG)必须是一个数字", trigger: ["blur", "change"] },
    { min: 0, type: "number", message: "总移库数量(KG)必须大于等于0", trigger: ["blur", "change"] },
  ],
});

// 查询
function handleQuery() {
  loading.value = true;
  console.log("queryParams", queryParams);
  inventoryApi
    .getPage(queryParams)
    .then((data: any) => {
      pageData.value = [...(data.list as any)];
      console.log("data", data);
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

const getProductType = async () => {
  try {
    const response = await configApi.getTypePage({
      pageNum: 1,
      pageSize: 999,
      productType: "1",
    });
    const dataList = response?.list || [];

    options.value = dataList.map((item: any) => ({
      value: item.code,
      label: item.productName,
    }));
  } catch (error) {
    console.error("Error fetching product types:", error);
  }
};

function changeparentName(val: any) {
  dialogFormData.productCode = val.value;
  dialogFormData.productName = val.label;
}

//强制完成
function handleDetail(row: any) {
  //是否确定
  ElMessageBox.confirm("是否确定强制完成?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    inventoryApi
      .forceComplete(row.id)
      .then(() => {
        ElMessage.success("操作成功");
        handleQuery();
      })
      .catch((err) => {
        // ElMessage.error(`${err}`);
      });
  });
}

// 重置查询
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  queryParams.pageSize = 20;

  handleQuery();
}

//新增/修改
function handleAdd(row: any, type: any) {
  if (type == "add") {
    dialog.title = "新增";
    tableData.value = [];
    buttonIsishow.value = true;
    clearDialogFormData();
    clearDialogFormDataPro();
  } else {
    dialog.title = "修改";
    buttonIsishow.value = true;
    Object.assign(dialogFormData, { ...row });
    dialogFormData.category = String(dialogFormData.category);
    getCategory();
  }
  dialog.visible = true;
  getCategory();
}

function getCategory() {
  configApi.getConfigListByType(ConfigType.MOVE_CATEGORY).then((res) => {
    categoryOptions.value = (res || []).map((item: any) => ({
      value: item.codeValue,
      label: item.codeName,
    }));
  });
}

//删除
function handleDel(row: any) {
  ElMessageBox.confirm("是否确定删除该数据?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    inventoryApi
      .delete({ id: row.id })
      .then(() => {
        handleQuery();
        ElMessage.success("操作成功");
      })
      .catch((err) => {
        // ElMessage.error(`${err}`);
      });
  });
}

//关闭弹窗
function handleCloseDialog() {
  clearDialogFormData();
  clearDialogFormDataPro();
  dialog.visible = false;
  unitValue.value = {};
}
// 选中产品单位值
const unitValue = ref<{ label?: string; value?: string }>({});
// 单位常量列表
const unitOptions = ref<Array<{ label: string; value: string }>>([]);
// 二级选择产品名称带出unit记录单位
const unitValueFormat = (value: any) => {
  let unit = productOptions.value.find((item) => item.value === value)?.unit;
  unitValue.value = unitOptions.value.find((item) => item.value === unit) as any;
};
const unitFormat = (unit: any) => {
  let unitLabel = unitOptions.value.find((item) => item.value === unit)?.label;
  return unitLabel;
};
// 获取常量列表
const getUnitList = () => {
  configApi.getConfigListByType(ConfigType.Unit).then((data) => {
    unitOptions.value = data.map((item: any) => {
      return { label: item.codeName, value: item.codeValue };
    });
  });
};

//查询子集
const queryProdTotalParams = reactive<inventoryPageQuery>({
  pageNum: 1,
  pageSize: 20,
});
const prodTotal = ref(0);
const handleProdQuery = (row: any) => {
  inventoryApi.getDetail(row.code).then((data) => {
    tableData.value = data;
  });
};

const getProduct = () => {
  planOrderApi
    .getTypePage({ pageNum: 1, pageSize: 999 })
    .then((data) => {
      productOptions.value = (data?.list || []).map((item: any) => ({
        value: item.code,
        label: item.productName,
        unit: item.unit,
      }));
    })
    .finally(() => {
      loading.value = false;
    });
};

const getWarehouse = () => {
  configApi.getConfigListByType(ConfigType.WAREHOUSE_CODE).then((res) => {
    console.log(res, "res");
    warehouseOptions.value = (res || []).map((item: any) => ({
      value: item.codeValue,
      label: item.codeName,
    }));
  });
};

const getbatch = () => {
  inventoryApi
    .getbatchApi({ pageNum: 1, pageSize: 999, statusList: [1, 3, 4, 5, 6] })
    .then((data) => {
      batchOptions.value = (data?.list || []).map((item: any) => ({
        value: item.code,
        label: item.code,
      }));
    })
    .finally(() => {});
};
function changeproductName(val: any) {
  dialogFormDataPro.productCode = val.value;
  dialogFormDataPro.productName = val.label;
  unitValueFormat(val.value);
}

function changeWarehouse(val: any) {
  dialogFormDataPro.warehouseFrom = val.value;
  dialogFormDataPro.warehouseNameFrom = val.label;
}

function changeWarehousetarget(val: any) {
  dialogFormDataPro.warehouseTo = val.value;
  dialogFormDataPro.warehouseNameTo = val.label;
}

function changeContactPerson(val: any) {}

function handleSavePro(type: string) {
  dialogFormDataProRef.value.validate((valid: boolean) => {
    if (!valid) {
      return;
    }
    // 检查是否已经存在相同的 productName
    const isDuplicate = tableData.value.some(
      (item) => item.productName === dialogFormDataPro.productName
    );
    if (isDuplicate) {
      ElMessage.error("该产品名称已存在，请勿重复添加");
      return;
    }

    const isWarehouse = dialogFormDataPro.warehouseFrom === dialogFormDataPro.warehouseTo;
    if (isWarehouse) {
      ElMessage.error("来源储位和目标储位不能相同，请重新选择");
      return;
    }
    tableData.value?.push({
      productCode: dialogFormDataPro.productCode,
      productName: dialogFormDataPro.productName,
      totalQty: dialogFormDataPro.totalQty,
      warehouseFrom: dialogFormDataPro.warehouseFrom,
      warehouseNameFrom: dialogFormDataPro.warehouseNameFrom,
      warehouseTo: dialogFormDataPro.warehouseTo,
      warehouseNameTo: dialogFormDataPro.warehouseNameTo,
      remark: dialogFormDataPro.remark,
      unit: unitValue.value.value,
    });
    ElMessage.success("添加成功");
    clearDialogFormDataPro();
  });
}

function clearDialogFormDataPro() {
  let data = {
    productCode: "",
    productName: "",
    warehouseNameFrom: "",
    warehouseFrom: "",
    warehouseNameTo: "",
    warehouseTo: "",
    totalQty: 0,
    remark: "",
  };
  Object.assign(dialogFormDataPro, { ...data });
}

function clearDialogFormData() {
  let data = {
    category: "",
    batch: "",
    moveDate: "",
    remark: "",
    // productCode: "",
    // productName: "",
    // prodDate: "",
  };
  Object.assign(dialogFormData, { ...data });
}

// 新增提交
function handleSubmit() {
  dialogFormDataRef.value?.validate((valid: boolean) => {
    if (!valid) {
      return;
    }
    if (!tableData?.value?.length) return ElMessage.error("请添加产品列表");
    // 确保 moveQty 不为 null
    dialogFormData.stockMoveDetailList = tableData.value.map((item) => ({
      ...item,
    }));
    // if (dialog.title == "新增") {
    //   dialogFormData.salesOrderDetailList = dialogFormData.salesOrderDetailList.map((item) => {
    //     const { id, ...rest } = item; // 使用对象解构去掉 id 属性
    //     return rest;
    //   });
    // } else {
    //   dialogFormData.salesOrderDetailList = fullRowTableData;
    // }
    let paramData = <inventoryForm>{};
    if (dialog.title == "新增") {
      paramData.category = dialogFormData.category;
      paramData.batch = dialogFormData.batch;
      paramData.stockMoveDetailList = dialogFormData.stockMoveDetailList;
      paramData.moveDate = dialogFormData.moveDate;
      paramData.remark = dialogFormData.remark;
    } else {
      paramData = { ...dialogFormData };
    }
    inventoryApi
      .addStockDetailMove(paramData)
      .then((data) => {
        ElMessage.success(`操作成功`);
        // dialog.visible
        handleCloseDialog();
        handleQuery();
        // clearDialogFormData();
        // if (rowObj.value) {
        //   handleRowClick(rowObj.value, {}, null);
        // }
      })
      .catch((error) => {
        //ElMessage.error(`${error}`); //注释报错弹窗
      })
      .finally(() => {});
  });
}

function delRow(row: any) {
  // 从 tableData 中移除相应的行
  const index = tableData.value.findIndex((item) => item.productCode === row.productCode);
  if (index !== -1) {
    tableData.value.splice(index, 1);
  }
  ElMessage.success("操作成功");
}

onMounted(() => {
  handleQuery();
  getUnitList();
});
</script>

<style lang="scss" scoped>
@use "@/styles/css/public" as *;
</style>
